// 创建地图实例
var map = new BMap.Map("allmap");
// 初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
// 启用滚轮放大缩小
map.enableScrollWheelZoom(true);

// 全局变量，用于存储所有标记
var markers = [];

// 获取当前位置
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
    if(this.getStatus() === BMAP_STATUS_SUCCESS){
        var mk = new BMap.Marker(r.point);
        map.addOverlay(mk);
        map.panTo(r.point);
        // 可以在这里添加其他操作，例如显示位置信息
        alert('您的位置：' + r.point.lng + ',' + r.point.lat);
    }
    else {
        alert('定位失败，请检查浏览器是否支持Geolocation或开启了定位权限。');
    }
},{enableHighAccuracy: true});

// 删除所有标记点
function removeAllMarkers() {
    for (var i = 0; i < markers.length; i++) {
        map.removeOverlay(markers[i]); // 从地图中删除标记点
    }
    markers = []; // 清空数组
}

$(function (){
    flashMarker();
})

function flashMarker(){
    removeAllMarkers();
    $.ajax({
        type:"post",//请求类型
        url:"/module/map/getMark",//请求地址
        dataType:"json",//交互的数据类型
        data:{
            bj_qx:'open'
        },
        cache:false,//去除请求的缓存
        success:function(ret){
            $.each(ret.retList, function(index, res) {
                addMarker(res.mk_lng,res.mk_lat,res.mk_id,res.mk_name,res.mk_ms,res.createUser.user_id,res.createUser.user_name);
            });
        }
    });
}

function addMarker(lng,lat,code,bj_name,bj_ms,id,name){
    var marker = new BMap.Marker(new BMap.Point(lng,lat));
    marker.extData = { code: code };
    map.addOverlay(marker);
    markers.push(marker); // 将新标记添加到数组中
    var userid = $("#userid").val();
    var username = $("#username").val();
    var infoWindow = new BMap.InfoWindow(
        '<div>'+
        '<span class="title" >编号 :</span>'+
        '<span class="nr code">'+code+'</span><hr/>'+
        '<span class="title">名称 :</span>'+
        '<span class="nr name">'+bj_name+'</span><hr/>'+
        '<span class="title">添加者:</span>'+
        '<span class="nr username">'+name+'</span><hr/>'+
        '<span class="title">描述 :</span>'+
        '<span class="nr ms">'+bj_ms+'</span><hr/>'+
        '<div id="btn_d" '+ (id == userid ? '' : 'style="display: none"') +'  >'+
        '<button class="windon_btn" id="edit_btn" onclick="editWindow('+code+')">编辑</button>'+
        '<button class="windon_btn" id="remove_btn" onclick="removeWindow('+lng+','+lat+','+code+')">删除</button>'+
        '</div>'+
        '</div>'
    );
    marker.addEventListener("mouseover",function(){
        this.openInfoWindow(infoWindow);
    });
}

// 添加标记的函数
// function addMarker(point,code,bj_name,bj_ms) {
//     var marker = new BMap.Marker(point);
//     marker.extData = { code: code };
//     var lng = point.lng; // 获取经度
//     var lat= point.lat; // 获取纬度
//     map.addOverlay(marker);
//     markers.push(marker); // 将新标记添加到数组中
//     var userid = $("#userid").val();
//     var username = $("#username").val();
//     var infoWindow = new BMap.InfoWindow(
//         '<div>'+
//             '<span class="title">编号 :</span>'+
//             '<span class="nr code">'+code+'</span><hr/>'+
//             '<span class="title">名称 :</span>'+
//             '<span class="nr name">'+bj_name+'</span><hr/>'+
//             '<span class="title">添加者:</span>'+
//             '<span class="nr username">'+username+'</span><hr/>'+
//             '<span class="title">描述 :</span>'+
//             '<span class="nr ms">'+bj_ms+'</span><hr/>'+
//             '<div id="btn_d">'+
//                 '<button class="windon_btn" id="edit_btn" onclick="editWindow('+lng+','+lat+')">编辑</button>'+
//                 '<button class="windon_btn" id="remove_btn" onclick="removeWindow('+lng+','+lat+','+code+')">删除</button>'+
//             '</div>'+
//         '</div>'
//     );
//     marker.addEventListener("mouseover",function(){
//         this.openInfoWindow(infoWindow);
//     });
//     // marker.addEventListener("mouseout",function(){
//     //     this.closeInfoWindow(infoWindow);
//     // });
// }

function removeWindow(lng,lat,code){
    var clickPoint = new BMap.Point(lng, lat);
    for (var i = 0; i < markers.length; i++) {
        var markerPoint = markers[i].getPosition();
        if (clickPoint.equals(markerPoint)) {
            // 删除标记
            map.removeOverlay(markers[i]);
            // 从数组中移除标记
            markers.splice(i, 1);
            deleteMark(code);
            break;
        }
    }
}

function deleteMark(code){
    $.ajax({
        type:"post",//请求类型
        url:"/module/map/deleteMark",//请求地址
        dataType:"json",//交互的数据类型
        data:{
            code:code
        },
        cache:false,//去除请求的缓存
        success:function(ret){
            if(ret.retCode=="0000"){
                layer.close(layer.index);
            }else{
                alert("失败");
            }
        }
    });
}

function editWindow(code){
    $.ajax({
        type:"post",//请求类型
        url:"/module/map/getMark",//请求地址
        dataType:"json",//交互的数据类型
        data:{
            code:code
        },
        cache:false,//去除请求的缓存
        success:function(ret){
            $.each(ret.retList, function(index, res) {
                layer.open({
                    type: 1,
                    area: '450px',
                    resize: false,
                    shadeClose: true,
                    title: '标记信息',
                    content: `
          <div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
                <div class="layui-input-group">
                <div class="layui-input-prefix">名称</div>
                <input type="text" id="bj_name" name="bj_name" placeholder="标记的名称" class="layui-input bj_inp" width="250px" value="`+res.mk_name+`">
              </div>
              <div class="layui-input-group">
                <div class="layui-input-prefix">描述</div>
                <input type="text" id="bj_ms" name="bj_ms" placeholder="描述标记" class="layui-input bj_inp" width="250px" value="`+res.mk_ms+`">
              </div>       
              <div class="layui-input-group">
                <div class="layui-input-prefix">权限</div>
                <select id="bj_qx" name="bj_qx" >
                  <option value="">请选择</option>
                   <option value="open" ` + (res.mk_purview === 'open' ? 'selected' : '') + `>公开</option>
                   <option value="close" ` + (res.mk_purview === 'close' ? 'selected' : '') + `>私人</option>
                </select>
              </div>
              <button id="submit_bj" class="layui-btn layui-btn-primary layui-border" onclick="changeMark(`+code+`)">提交</button>
          </div>
        `
                });
            });
        }
    });

}

$(document).ready(function() {
    $("#btnMarker").click(getAddClickPoint);
});

var mapClickHandler = function(e) {
    addwindow(e);
};

function getAddClickPoint(){
    map.addEventListener("click", mapClickHandler);
    $("#btnMarker").text("取消创建标记功能");
    $("#btnMarker").off('click').click(removeAddClickPoint);
}

function removeAddClickPoint(){
    map.removeEventListener("click", mapClickHandler);
    $("#btnMarker").text("获取创建标记功能");
    $("#btnMarker").off('click').click(getAddClickPoint);
}

layui.use(function() {
    var $ = layui.$;
    var layer = layui.layer;
    var util = layui.util;
    var form = layui.form;
});

var point;
function addwindow(e) {
    point = new BMap.Point(e.point.lng, e.point.lat);
    layer.open({
        type: 1,
        area: '350px',
        resize: false,
        shadeClose: true,
        title: '标记信息',
        content: `
          <div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
                <div class="layui-input-group">
                <div class="layui-input-prefix">名称</div>
                <input type="text" id="bj_name" name="bj_name" placeholder="标记的名称" class="layui-input bj_inp" width="250px">
              </div>
              <div class="layui-input-group">
                <div class="layui-input-prefix">描述</div>
                <input type="text" id="bj_ms" name="bj_ms" placeholder="描述标记" class="layui-input bj_inp" width="250px">
              </div>  
              <div class="layui-input-group">
                <div class="layui-input-prefix">权限</div>
                <select id="bj_qx" name="bj_qx" > 
                  <option value="">请选择</option>
                  <option value="open">公开</option>
                  <option value="close">私人</option>
                </select>
              </div>       
              <button id="submit_bj" class="layui-btn layui-btn-primary layui-border" onclick="submitadd()">提交</button>
          </div>
        `
    });
}
function submitadd(){
    removeWindow(point.lng,point.lat);
    var bj_name = document.getElementById('bj_name').value;
    var bj_ms = document.getElementById('bj_ms').value;
    var bj_qx = document.getElementById('bj_qx').value;
    if(bj_name != "" && bj_ms != ""&& bj_qx != ""){
        $.ajax({
            type:"post",//请求类型
            url:"/module/map/addMark",//请求地址
            dataType:"json",//交互的数据类型
            data:{
                bj_lng:point.lng,
                bj_lat:point.lat,
                bj_name:bj_name,
                bj_ms:bj_ms,
                bj_qx:bj_qx
            },
            cache:false,//去除请求的缓存
            success:function(ret){
                if(ret.retCode=="0000"){
                    // addMarker(point,bj_name,bj_ms);
                    flashMarker();
                    layer.close(layer.index);
                }else{
                    alert("失败");
                }
            }
        });
    }else{
        alert("请填写信息.")
    }

}

function changeMark(code){
    var bj_name = document.getElementById('bj_name').value;
    var bj_ms = document.getElementById('bj_ms').value;
    var bj_qx = document.getElementById('bj_qx').value;
    if(bj_name != "" && bj_ms != ""&& bj_qx != ""){
        $.ajax({
            type:"post",//请求类型
            url:"/module/map/changeMark",//请求地址
            dataType:"json",//交互的数据类型
            data:{
                code:code,
                bj_name:bj_name,
                bj_ms:bj_ms,
                bj_qx:bj_qx
            },
            cache:false,//去除请求的缓存
            success:function(ret){
                if(ret.retCode=="0000"){
                    // addMarker(point,bj_name,bj_ms);
                    flashMarker();
                    layer.close(layer.index);
                }else{
                    alert("失败");
                }
            }
        });
    }else{
        alert("请填写信息.")
    }

}